<template>
	<section>
		<header class="bbtm fixed_u wallfff" v-if="isHerde">
			<h1 class="sz36 hue333 flex_core w100 fontwt hei100">油卡充值</h1>
			<router-link to="/cardoilAll/rechargeRecord" class="h_">
				<span class="sz28 hue999">充值记录</span>
			</router-link>
		</header>
		<div class="content" :class="{content_margin:!isHerde}" >
			<router-link class="banner" to='/cardoilAll/discountDetails' v-show="selected==0">
				<img :src="Discount.Image_Url"  :onerror="imgError">
			</router-link>
			<router-link class="banner data"  to='/cardoilAll/discountDetails' v-show="selected==1">
				<img :src="Discount.ImageOfCard_Url"  :onerror="imgError">
			</router-link> 
			<div class="OilTypeWay">
				<span v-for="(item,index) in OilTypeWay"  :class="{activeEes:selected===index}" @click="onSelect(index)">{{item.name}}</span>
			</div> 
			<div class="OilType" v-show="selected==0">
				<div class="defaultCard plr30 pud15">
					<ul>
						<li class="flexs flex_middle flex_between">
							<p>
								<span v-if="isShow">{{CardNum.OilCard_Num}}</span>
								<span v-else>请添加卡号</span>
								<font>默认卡号</font>
							</p>
							<router-link class=" " to='/mycentreAll/addoilcard'>
								<i><img src="../../assets/Cardoil/seletOilcar.png"></i>
							</router-link>
						</li>
					</ul>
				</div>
				<div class="refMoney plr30 pud10 wallfff">
					<p>充值金额</p>
					<ul class="flex_wrap   flex_between pud15 ">
						<li v-for="(item,index) in listData" :class="{active:index===num}" :data-id="item.RechargeCard_ID" @click="onMoeny(item,index)">{{item.RechargeCard_Limit | money }}元</li>
					</ul>
				</div> 
			</div>
			
			<div class="OilType" v-show="selected==1"> 
				<div class="refMoney plr30 pud10 wallfff"> 
					<ul class="flex_wrap   flex_between pud15 ">
						<li v-for="(item,index) in listCaes" :class="{active:index===Case}"  @click="onCase(item,index)">{{item.EntityOilCard_Limit | money }}元</li>
					</ul>
				</div> 
			</div>
			
			
			
			<div class="clause pud20 plr30 wallfff mu10">
				<p>
					<label>
						<i class="iconfont icon-xuanzhong"></i>
						 我已阅读  </label>
					<router-link to="/cardoilAll/termsService" class="serve">《服务条款及注意事项》</router-link>
				</p>
			</div>
		</div>

		<div class="payButtom w100  flex_between" :class="{paybotm:!isHerde}">
			<span v-if="selected==0">支付金额：<font>{{moenySun | moneyTwo}}元</font></span>
			<span v-else>支付金额：<font>{{moenyCaes | moneyTwo}}元</font></span>
			<button class="flex1" @click="onModle()" v-if="selected==0">确认支付</button>
			<router-link to="/cardoilAll/receiveMesg"class="flex1 rout_rece" v-else>
				确认支付
			</router-link> 
		</div>
		<transition name="fade">
			<div class="payment" v-show="isModle">
				<p class="p_tite">
					<a class="hue999 " @click="onModle()">×</a>
					<span class="hue333">确认付款</span>
				</p>
				<p class="p_moeny">
					<span v-if="selected==0">订单金额：<font>￥{{moenySun | moneyTwo}}</font></span>
					<span  v-else>订单金额：<font>￥{{moenyCaes | moneyTwo}}</font></span>
				</p>
				<p class="p_text">选择支付方式</p>
				<ul class="payWay">
					<li class="flex_between" v-for="item in payWay" @click="onpayWay(item)">
						<p class="p_one"><i><img :src="item.imgs"></i><span>{{item.texts}}</span></p>
						<p>
							<i class="iconfont icon-xuanzhong  active" v-if="item.boole"></i>
							<i class="iconfont icon-kongxinyuan" v-else></i>
						</p>

					</li>
					<button class="payYes" @click="UnifiedOrder(),onModle()">确认付款</button>
				</ul>
			</div>
		</transition>
		<div class="payment_inte" v-if="pawds">
			<span @click="pawdsBut()">×</span>
			<input type="password" v-model="pawd" placeholder="输入支付密码" />
			<button  @click="pawdsBut(),inteYes()">确认支付</button>
		</div>
		<div class="layer" @click="onModle()" v-if="isModle"></div>
		<div class="layer_two" v-if="pawds" @click="pawdsBut()" ></div>
		<!--<div class="layer_two" v-if="rust" @click="onRust()"></div>-->
		
		<alipay :payAlipay="alipaysubmit"></alipay>
	</section>
</template>

<script>
	import { Toast } from 'mint-ui';
	import Qs from 'qs';
	import { Indicator } from 'mint-ui';
	import alipay from '../../components/Cardoil/alipay';
	import md5 from 'js-md5';
	export default {
		components: {
			alipay
		},
		data() {
			return {
				isShow: false,
				isModle: false,
				pawds:false,
				payWay: [{
						imgs: require("../../assets/Cardoil/WeChat.png"),
						texts: '微信支付',
						PayType: 'Wxpay',
						boole: false
					},
					{
						imgs: require("../../assets/Cardoil/alipay.png"),
						texts: '支付宝支付',
						PayType: 'Alipay',
						boole: true
					},
					{
						imgs: require("../../assets/Cardoil/inte.png"),
						texts: '积分支付',
						PayType: 'integral',
						boole: false
					}
				],
				listData: [],//充值
				listCaes: [],//购卡
				num: 0,
				Case:0,
				CardNum: [],
				Discount: {},
				moenys:'0.00',//支付金额
				moenySun: '0.00',
				moenyCaes:'0.00',
				PayType: '',
				RechargeCard_ID: '',//充值卡号
				EntityOilCard_ID:'',//购卡卡号
				alipaysubmit: '' , 
				rust:false,//充值与购买判断
				selected:0,
				OilTypeWay:[
					{ 
					  name:'充值'
					},
					{ 
					  name:'购买'
					}
				],
				ReceiveName:'',
				ReceivePhone:'',
				ReceiveAddress:'',
				pawd:''
			}
		},
		created: function() {
			this.urls = this.$store.state.urls;
			this.ImgUrls = this.$store.state.ImgUrls;
			this.isHerde = this.$store.state.Type;
			this.MembersID = this.$store.state.MembersID;
			this.imgError=this.$store.state.imgError;
			if(!this.$store.state.MembersID){
		  		 this.$router.push({path:'/LoginAll/ToLogin'}) 
		  	} 
		},
		mounted: function() { 
			let _this = this;
			Indicator.open({
					spinnerType:'snake'
			}); 
			_this.$http.all([function () {
				//获取充值金额
				return _this.$http.get(_this.urls+"/WorkRechargeCard/V1.0/GetRechargeCard");
			}(),function () {
				//获取购卡金额
				return _this.$http.get(_this.urls+"/WorkRechargeCard/V1.0/GetEntityOilCard");
			}(),function () {
				//获取折扣 
				return _this.$http.get(_this.urls+"/WorkRechargeCard/V1.0/GetMembersDiscount",{
					params:{
						"MembersID": _this.MembersID
					}
				});
			}()]).then(
				_this.$http.spread(function (res1,res2,res3) { 
					_this.listData = res1.data.Return_Data;
					_this.RechargeCard_ID = _this.listData[0].RechargeCard_ID; 
					//
					_this.listCaes=res2.data.Return_Data;
					//
					_this.Discount = res3.data.Return_Data;
					_this.moenySun = _this.Discount.Level_Discount * _this.listData[0].RechargeCard_Price;//充值
					_this.moenyCaes = _this.Discount.Level_DiscountOfCard * _this.listCaes[0].EntityOilCard_Price;//购卡
					_this.$store.state.moenyCaes=_this.moenyCaes;
					_this.$store.state.EntityOilCardID=_this.listCaes[0].EntityOilCard_ID;
					Indicator.close();
				})
			).catch((err1,err2) => {
				Indicator.close();
			});
			this.GetMembersOilCard();
		}, 
		methods: {
			onModle: function() {
				this.isModle = !this.isModle; 
			},
			pawdsBut:function(){
				this.pawds = !this.pawds;
			},
			onpayWay: function(item) {
				this.payWay.filter(function(arr) {
					arr.boole = false;
				})
				item.boole = true;
			},
			onMoeny: function(item, index) { 
				this.num = index;
				this.moenySun = this.Discount.Level_Discount * item.RechargeCard_Price;
				this.RechargeCard_ID = item.RechargeCard_ID; 
			},
			onCase:function(item, index) {
				this.Case = index;
				this.moenyCaes = this.Discount.Level_DiscountOfCard * item.EntityOilCard_Price;
				this.EntityOilCard_ID = item.EntityOilCard_ID;
				this.$store.state.EntityOilCardID=this.EntityOilCard_ID;
				this.$store.state.moenyCaes=this.moenyCaes; 
			}, 
			onSelect:function(index){
				this.selected=index;
			},
			
			//获取默认卡号
			GetMembersOilCard: function() { 
				this.$http.get(this.urls + "/WorkMembersOilCard/V1.0/GetMembersOilCard", {
					params: {
						"MembersID": this.MembersID
					}
				}).then((res) => {
					this.listCard = res.data.Return_Data;
					if(this.listCard.length > 0) {
						this.CardNum = this.listCard[0]
						this.isShow = true;
					} else {
						this.isShow = false;
					}
				}).catch((err) => {
					console.log(err)
				});
			}, 
			//支付接口
			UnifiedOrder: function() {
				this.payWay.filter((arr) => {
					if(arr.boole) {
						this.PayType = arr.PayType
					}
				});
				if(this.PayType=='Wxpay'){
					this.Wxpay()
					
				}else if(this.PayType=='Alipay'){
					this.Alipay()
				}else if(this.PayType=='integral'){
					this.integral()
				}else{
					Toast("错误信息~")
				}  
			},
			Wxpay:function(){
				console.log("微信")
			},
			Alipay:function(){ 
				this.data = JSON.stringify({
						"MembersID": this.MembersID,
						"RechargeCardID": this.RechargeCard_ID,
						"OilCardID": this.CardNum.OilCard_ID
				});
				if(this.CardNum.OilCard_Num && this.moenySun> 0 && this.MembersID) { 
					this.$http.post(this.urls + '/Pay/V1.0/UnifiedOrder', Qs.stringify({
						"Source": "wap",
						"PayType": "Alipay",
						"Price": this.moenySun,
						"Type": "OilRecharge",
						"Data": this.data
					})).then((res) => {
						Toast(res.data.Return_Mess);
						console.log(res.data.Return_Data)
						let formtext = /<form.+>(.+)<\/form>/.exec(res.data.Return_Data)[0];
						console.log(formtext);
						this.alipaysubmit = formtext;
					}).catch((err) => {
						console.log(err);
					});
				} else {
					Toast("请添加默认油卡");
				}
			},
			integral:function(){
				this.$http.get(this.urls + "/WorkMembers/V1.0/GetMembersByID", {
					params: {
						"MembersID": this.MembersID
					}
				}).then((res) => {
					this.MembersInfo = res.data.Return_Data; 
					if(this.MembersInfo.Members_HasPayPwd==0) {
						Toast("设置初始密码~")
						this.$router.push({
							path: '/mycentreAll/setpwd?types=pay'
						});
					} else {
						if(this.CardNum.OilCard_Num && this.MembersID){
							this.pawds=true;
						}else{
							Toast("请添加默认油卡~");
						} 
					}
				}).catch((err) => {
					console.log(err)
				}); 
			},
			inteYes:function(){
				this.data = JSON.stringify({
					"MembersID": this.MembersID,
					"RechargeCardID": this.RechargeCard_ID,
					"OilCardID": this.CardNum.OilCard_ID
				}); 
				if(!this.pawd) {
					Toast("请输入密码~")
				}else{
					this.$http.post(this.urls + '/Pay/V1.0/PointPay', Qs.stringify({
						"Type": "OilRecharge",
						"Data": this.data,
						'PayPwd':md5(this.pawd)
					})).then((res) => { 
						 if(res.data.Return_ID==0){
						 	Toast(res.data.Return_Mess); 
						 	this.$router.push({
								path: '/cardoilAll/refillCard'
							});
						 }else{ 
						 	Toast(res.data.Return_Mess); 
						 }
						 this.pawd='';
					}).catch((err) => {
						console.log(err);
					});
				}
			}

		},
		filters: {
			money: function(val) {
				let money = val
				if(money == 0) {
					money = 0.00;
				} else {
					money = Number(money).toFixed(0);
				} 
				return money
			},
			moneyTwo: function(val) {
				let money = val
				if(money == 0) {
					money = 0.00;
				} else {
					money = Number(money).toFixed(2);
				} 
				return money
			}
		}
	}
</script>

<style scoped>
	.content {
		margin-top: 1.3333333333rem;
		margin-bottom: 2.8rem;
	}
	.content_margin{
		margin-top:0;
		margin-bottom:0;
	}
	.banner {
		width: 100%;
		display: block;
	}
	
	.banner img {
		width: 100%;
		max-height:3.3333333333rem;
	}
	
	.defaultCard {
		width: 100%;
		margin: 0.1333333333rem 0;
		background-color: #fff;
	}
	
	.defaultCard ul li {
		width: 100%;
	}
	
	.defaultCard ul li p {
		width: 85%;
		display: inline-block;
		border-right: 1px solid #eeeeee;
	}
	
	.defaultCard ul li p span {
		display: block;
		font-size: 0.5333333333rem;
		color: #333;
	}
	
	.defaultCard ul li p font {
		font-size: 0.2933333333rem;
		color: #999;
	}
	
	.defaultCard ul li a i {
		display: inline-block;
		width: 0.9333333333rem;
	}
	
	.defaultCard ul li a i img {
		width: 100%;
	}
	
	.refMoney p {
		font-size: 0.4rem;
		color: #333;
		line-height: 0.8rem;
	}
	
	.refMoney ul li {
		width: 2.6666666666rem;
		height: 1.2rem;
		display: inline-block;
		border: 1px solid #DF4444;
		margin-bottom: 0.5333333333rem;
		border-radius: 0.0666666666rem;
		text-align: center;
		line-height: 1.2rem;
		color: #DF4444;
		font-size: 0.4533333333rem;
	}
	
	.refMoney ul .active {
		background-color: #DF4444;
		color: #fff;
	}
	
	.clause p label i {
		color: #71b5f4;
	}
	
	.clause p label {
		color: #333;
		font-size: 0.32rem;
	}
	
	.clause p a {
		color: #71b5f4;
		font-size: 0.32rem;
	}
	
	.payButtom {
		position: fixed;
		left: 0;
		bottom: 1.4666666666rem;
		background-color: #fff;
		z-index: 10;
	}
	.paybotm{
		bottom:0;
	}
	.payButtom span {
		height: 1.1333333333rem;
		width: 70%;
		line-height: 1.1333333333rem;
		text-indent: 0.4rem;
		font-size: 0.3733333333rem;
		color: #333;
	}
	
	.payButtom span font {
		color: #DF4444;
	}
	
	.payButtom button {
		background-color: #DF4444;
		color: #fff;
		outline: none;
		font-size: 0.4533333333rem;
	}
	
	.layer {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 101;
		width: 100%;
		height: 100%;
	}
	.layer_two{
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 101;
		width: 100%;
		height: 100%;
	}
	.payment {
		position: absolute;
		z-index: 102;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
	}
	
	.p_tite {
		width: 100%;
		line-height: 1.0666666666rem;
		padding: 0.3333333333rem 0.4rem;
		border-bottom: 1px solid #dcdcdc;
		font-size: 0.4533333333rem;
		text-align: center;
	}
	
	.p_tite a {
		font-size: 0.6666666666rem;
		float: left;
	}
	
	.p_tite span {
		text-indent: -0.4rem;
	}
	
	.p_moeny {
		height: 1.6rem;
		line-height: 1.6rem;
		padding: 0 0.4rem;
		color: #333;
		font-size: 0.4rem;
	}
	
	.p_moeny font {
		font-size: 0.56rem;
		color: #DF4444;
	}
	
	.p_text {
		font-size: 0.4rem;
		color: #333333;
		background-color: #f6f6f6;
		padding: 0.3333333333rem 0.4rem;
	}
	
	.payWay {
		width: 100%;
		padding: 0.2rem 0.4rem;
	}
	
	.payWay li {
		width: 100%;
		height: 1.2rem;
		line-height: 1.2rem;
		font-size: 0.3733333333rem;
		color: #333;
	}
	
	.payWay li p {
		display: inline-block;
	}
	
	.payWay li p.p_one i {
		display: inline-block;
		width: 0.5466666666rem;
	}
	
	.payWay li p.p_one i img {
		width: 100%;
		float: left;
		margin-top: 0.3rem;
	}
	
	.payWay li p.p_one span {
		float: right;
		margin-left: 0.2666666666rem;
	}
	
	.active {
		color: #DF4444;
	}
	
	.payYes {
		width: 100%;
		height: 1.0666666666rem;
		color: #fff;
		font-size: 0.4533333333rem;
		background-color: #DF4444;
		border-radius: 0.1333333333rem;
		outline: none;
		margin: 0.6666666666rem 0;
	}
	
	.fade-enter-active {
		transition: all .3s ease;
	}
	
	.fade-leave-active {
		transition: all .5s ease;
	}
	
	.fade-enter,
	.fade-leave-to {
		transform: translateY(100%);
		opacity: 1;
	}
	
	.OilTypeWay{
		background-color: #fff;
		padding: 0 0.4rem;
		margin-top: 0.1333333333rem;
		margin-bottom: 0.2666666666rem;
	}
	.OilTypeWay span{
		width:49%;
		display: inline-block;
		text-align: center;
		font-size: 0.4533333333rem;
		color: #333;
	}
	.OilTypeWay span:first-child{
		border-right:1px solid #efefef;
		padding: 0.2rem 0;
		margin: 0.2rem 0;
	}
	.OilTypeWay span.activeEes{
		color: #DF4444;
	}
	.Receive{
		 position: fixed;
		 z-index: 102;
		 top:25%;
		left: 5%;
		width:90%;
		background-color: #fff;
		border-radius:0.1333333333rem;
		padding: 0.4rem;
		padding-top: 0;
	}
	.Receive .delet{
		text-align: right;
		font-size: 0.8rem;
		color: #999999;
	}
	.Receive ul {
		width: 100%;
	}
	.Receive ul li{
		width: 100%;
		margin-bottom: 0.2666666666rem;
	} 
	.Receive ul li span{
		width: 22%;
		display: inline-block;
		font-size: 0.3733333333rem;
		color: #333;
	}
	.Receive ul li input{
		width:77.5%;
		height:1.1733333333rem;
		background-color: #f2f2f2;
		font-size: 0.3733333333rem;
		color: #999;
		text-indent:0.4rem;
		border-radius:0.1333333333rem;
	}
	.Receive .butchangs{
		width: 100%;
		text-align: center;
		margin-top: 0.6666666666rem;
	}
	.Receive p button{
		width: 5.3333333333rem;
		height:1rem;
		border-radius:0.1333333333rem;
		background-color: #DF4444;
		color: #fff;
		font-size: 0.4533333333rem;
	}
	.rout_rece{
		background-color: #DF4444;
	    color: #fff;
	    outline: none;
	    font-size: 0.4533333333rem;
	    text-align: center;
	    line-height: 1.13333333rem;
	}
	.layer_two{
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 101;
		width: 100%;
		height: 100%;
	}
	.payment_inte{
		width:90%;
		left: 5%;
		top: 25%;
		position: fixed;
		z-index: 102;
		background-color: #fff;
		border-radius:0.1333333333rem;
		padding: 0.4rem;
		padding-top: 0;
	}
	.payment_inte span{
		display: block;
		text-align: right;
		font-size:0.6666666666rem;
		color: #999;
	}
	.payment_inte input{
		width: 100%;
		height: 1.2rem;
		background-color: #F2F2F2;
		text-indent: 0.4rem;
		font-size: 0.3733333333rem;
		margin-bottom: 0.8rem;
		margin-top: 0.4rem;
		border-radius: 0.1333333333rem;
	}
	.payment_inte button{
		width:80%;
		height:0.9333333333rem;
		background-color: #DF4444;
		color: #fff;
		margin-left: 10%;
		font-size: 0.4533333333rem;
		border-radius: 0.1333333333rem; 
	}
</style>